<template>
  <div class="app-container">
    <!-- <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="handleResetClick" /> -->
    <PageContent ref="contentRef" :content-config="contentConfig" @addClick="handleAddClickFn"
      @edit-click="handleEditClick" @export-click="handleExportClick" @toolbarClick="handleToolbarClick"
      @operat-click="handleOperatClick">
      <template #status="scope">
        <el-tag :type="statusList[scope.row[scope.prop]].type">
          {{ $t(statusList[scope.row[scope.prop]].text) }}
        </el-tag>
      </template>
    </PageContent>

    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
      <!-- <template #image="scope">
        <div class="w-full">
          <el-upload drag action="" auto-upload :show-file-list="false" :http-request="uploadFile" @change="addUpImg"
            name="image">
            <div class="absolute-lt size-full bg-#fff" v-if="upImgFile">
              <img :src="upImgFile" class="w-auto h-full" />
            </div>
            <el-icon class=" el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text"> Drop file here or <em>click to upload</em> </div>
          </el-upload>
        </div>
      </template> -->
    </page-modal>
    <!-- 编辑 -->
    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
      <!-- <template #image="scope">
        <div class="w-full">
          <el-upload drag action="" :auto-upload="false" :show-file-list="false" @change="editUpImg">
            <el-icon class=" el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text"> Drop file here or <em>click to upload</em> </div>
            <div class="absolute-lt size-full bg-#fff" v-if="upImgFile || scope.prop">
              <img :src="upImgFile || scope.prop" class="w-auto h-full" />
            </div>
          </el-upload>
        </div>
      </template> -->
    </page-modal>
  </div>
</template>

<script setup>
import searchConfig from "./config/search";
import contentConfig from "./config/content";
import addModalConfig from "./config/add";
import editModalConfig from "./config/edit";
import usePage from "@/hooks/usePage";
import Api from "@/api/setting/banner";
defineOptions({
  name: "thirdGamesCategories",
  inheritAttrs: false,
});
const { searchRef, contentRef, addModalRef, editModalRef,
  handleQueryClick, handleResetClick, handleAddClick,
  handleSubmitClick, handleExportClick, } = usePage();
const statusList = {
  1: { text: "status.1", type: "success" },
  0: { text: "status.2", type: "danger" },
}
const handleAddClickFn = () => {
  upImgFile.value = ''
  param.value.image = ''
  handleAddClick()
}
const handleEditClick = (row) => {
  upImgFile.value = row.image_url
  // 模拟根据id获取数据进行填充
  editModalRef.value?.setModalVisible(row);
}
const upImgFile = ref()
const param = ref({
  image: '',
})

const uploadFile = async (options) => {
  const { url, path } = await Api.upload(options.file);
  console.log(url, path);

}
const addUpImg = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    console.log(e);
    upImgFile.value = e.target.result;
  };
  console.log(file);
  reader.readAsDataURL(file.raw);
  param.value.image = file
  changeAdd(param.value, 'add')
}
const editUpImg = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    console.log(e);
    upImgFile.value = e.target.result;
  };
  console.log(file);
  reader.readAsDataURL(file.raw);
  param.value.image = file
  changeAdd(param.value, 'edit')
}

const changeAdd = (obj, type) => {
  if (type === 'edit') {
    editModalRef.value?.setModalVisible(obj);
  } else if (type === 'add') {
    addModalRef.value?.setModalVisible(obj);
  }
}
</script>

<style>
.el-upload-dragger {
  padding: 20px 10px;
}
</style>